<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'/>
    <title>Drive</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="../node_modules/mapbox-gl/dist/mapbox-gl.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="../node_modules/mapbox-gl/dist/mapbox-gl.js"></script>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

    </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <a class="navbar-brand" href="#">GeoSOT</a>

    <div class="collapse navbar-collapse" id="navbar-collapse-basepage">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Choose <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Car 1</a></li>
                    <li><a href="#">Car 2</a></li>
                    <li><a href="#">Car 3</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Map <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#" id="li_2d_map">2D</a></li>
                    <li><a href="#" id="li_3d_map">3D</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Trace <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#" id="li_trace_open">Open</a></li>
                    <li><a href="#" id="li_trace_close">Close</a></li>
                </ul>
            </li>
            <li><a href="#">Setting</a></li>
        </ul>
    </div>

</nav>
<div id='map'></div>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiemhpbmVuZ2ppYXNoaSIsImEiOiJjajdyYnVvcm40YnFmMndvMnhqMXBjdzQ3In0.VoGV5IHrJPEkU2m8CemHAQ';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/satellite-streets-v9',
        center: [116.3005, 39.9855],
        pitch: 0,
        zoom: 18
    });
    map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');

    var is_3d = false;
    var is_tracing = true;
    var lastTime = new Date();
    var line_geojson = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [116.30806, 39.98534]
                ]
            }
        }]
    };
    var point_geojson = {
        "type": "Point",
        "coordinates": [116.3, 39.9]
    };
    var time_index_pair = {};

    var socket = io();

    map.on('load', function () {
        map.addLayer({
            'id': 'line-animation',
            'type': 'line',
            'source': {
                'type': 'geojson',
                'data': line_geojson
            },
            'layout': {
                'line-cap': 'round',
                'line-join': 'round'
            },
            'paint': {
                'line-color': '#ed6498',
                'line-width': 5,
                'line-opacity': .8
            }
        });
        map.addSource('car', {type: 'geojson', data: point_geojson});
        map.addLayer({
            "id": "car-marker",
            "type": "symbol",
            "source": "car",
            "layout": {
                "icon-image": "circle-15",
                "icon-rotation-alignment": "map"
            }
        });

        line_geojson.features[0].geometry.coordinates.pop();
        socket.on('record', function (data) {

            var messageList = data.message.split(",");
            for (var i in messageList) {
                var message = messageList[i];
                var columns = message.split(" ").map(function (e) {
                    return parseFloat(e);
                });
                var timestamp = columns[0];

                var location = [columns[1], columns[2]];
                point_geojson.coordinates = location;

                if (time_index_pair[timestamp]) {
                    line_geojson.features[0].geometry.coordinates[time_index_pair[timestamp]] = location;
                }
                else {
                    time_index_pair[timestamp] = line_geojson.features[0].geometry.coordinates.length;
                    line_geojson.features[0].geometry.coordinates.push(location);
                    map.getSource('car').setData(point_geojson);
                }
            }
            map.getSource('line-animation').setData(line_geojson);
            var currentTime = new Date();
            if (currentTime - lastTime > 2000) {
                if (is_tracing) {
                    if (Math.abs(map.getCenter().lat - location[1]) >= 0.0002 ||
                        Math.abs(map.getCenter().lng - location[2]) >= 0.0002) {
                        map.setCenter(location);
                    }

                    if (is_3d) {
                        var w = columns[4];
                        var x = columns[6]; //纬度指向Y方向
                        var y = columns[5];
                        var z = columns[7];
                        var yao = Math.atan2(2 * (w * x + x * y), 1 - 2 * (y * y + z * z));
                        var corrected_yao = yao * 180 / Math.PI + 180;
                        if (corrected_yao < 0)
                            corrected_yao += 360;
                        else if (corrected_yao > 360)
                            corrected_yao -= 360;
                        console.log(corrected_yao);
                        map.setBearing(corrected_yao);
                    }
                }
                lastTime = currentTime;
            }
        });
        socket.on('reset', function (data) {
            line_geojson.features[0].geometry.coordinates = [];
            time_index_pair = {};
        });

    });
    $(document).ready(function () {
        $("#li_2d_map").click(function () {
            map.setPitch(0);
            is_3d = false;
        });
        $("#li_3d_map").click(function () {
            map.setPitch(60);
            is_3d = true;
        });

        $("#li_trace_open").click(function () {
            is_tracing = true;
        });
        $("#li_trace_close").click(function () {
            is_tracing = false;
            map.setBearing(0);
            map.setPitch(0);
        });
    });
</script>

</body>

</html>